<template>
  <div class="composite-search-box">
    <div class="left-icon" @click="openSelect">
      <div>
        <span style="margin-right:3px;">搜索范围</span>
        <a-icon v-show="!isSelectShow" type="down" />
        <a-icon v-show="isSelectShow" type="up" :style="{ color: '#40a9ff' }" />
      </div>
    </div>
    <div class="inner-box">
      <a-icon type="search" style="cursor:pointer;" @click="onSearch" />
      <input v-model="currentValue" type="text" placeholder="输入关键词" class="input-box" @input="currentValueChange">
    </div>
    <div v-if="isAdSearch" class="right-icon" @click="openAdSearch">高级搜索</div>
    <transition name="modal-fade">
      <div v-if="isSelectShow" class="select-content-box">
        <div :class="`select-type ${isSelectAll ? 'isSelect' : ''}`" @click="onSelectAll">
          <span>搜索全部</span>
          <a-icon v-show="isSelectAll" type="check" :style="{ color: '#40a9ff' }" />
        </div>
        <div class="select-type" @click="openSelectOther">
          <span>搜索特定字段</span>
          <a-icon v-show="!isSelectOther" type="down" />
          <a-icon v-show="isSelectOther" type="up" :style="{ color: '#40a9ff' }" />
        </div>
        <div class="field-box" v-show="isSelectOther">
          <div
            v-for="(item, index) in searchFieldList"
            :key="index"
            :class="`field-item ${item.isSelect ? 'isSelect' : ''}`"
            @click.prevent="onSelectOther(item)">
            <a-checkbox v-model="item.isSelect" @change="selectOtherChange">{{ item.name }}</a-checkbox>
          </div>
        </div>
      </div>
    </transition>
    <a-drawer
      title="高级搜索"
      width="520"
      :bodyStyle="{ padding: '0' }"
      :visible="drawerVisible"
      :maskClosable="true"
      @close="onDrawerClose">
      <div class="ad-header-box">
        <div v-if="tagList.length">
          <a-tag
            v-for="item in tagList"
            :key="item.name"
            closable
            @click="onTagClick(item)"
            @close="onTagClose(item)">
            {{ item.name }}
          </a-tag>
        </div>
        <div v-else>亲~可保存常用的搜索条件，方便下次一键批量录入搜索条件值</div>
      </div>
      <div class="ad-content-box">
        <slot name="ad-search-content"></slot>
      </div>
      <div class="ad-footer-box">
        <div>
          <a-button type="primary" @click="onAdSearch">确定搜索</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="onAdClear">重置</a-button>
        </div>
        <div>
          <a-popover v-model="popoverVisible" title="保存筛选条件" trigger="click">
            <template slot="content">
              <div class="popover-footer">
                <a-input v-model="saveFilterValue" :maxLength="8" :suffix="popoverSuffix"></a-input>
                <a-button type="primary" @click="onSaveFilterData">确定</a-button>
              </div>
            </template>
            <a-button type="link">保存筛选条件</a-button>
          </a-popover>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { debounce } from '@/utils/util.js';

export default {
  name: 'CompositeSearch',
  props: {
    fieldList: {
      type: Array,
      default: () => [
        { name: '供应商编号', field: 'field1' },
      ]
    },
    isAdSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentValue: '', // 当前输入值
      isSelectShow: false, // 搜索框-展示状态
      isSelectAll: true, // 是否选中 搜索全部
      isSelectOther: true, // 搜索框-搜索特定字段-展示状态
      searchFieldList: [], // 搜索框-搜索特定字段
      drawerVisible: false, // 高级搜索 展示状态
      popoverVisible: false, // 保存筛选条件 展示状态
      saveFilterValue: '', // 筛选条件名称
      tagList: [],  // 筛选条件
    }
  },
  computed: {
    popoverSuffix() {
      return `${this.saveFilterValue.length}/8`
    }
  },
  mounted() {
    this.searchFieldList = this.fieldList.map(item => {
      return { ...item, isSelect: false };
    });
    this.getTagList();
    // 为文档添加点击事件监听器
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    // 在组件销毁前，移除点击事件监听器
    document.removeEventListener('click', this.handleClickOutside);
  },
  methods: {
    getTagList() {
      this.tagList = [
        { name: '筛选组合01' },
        { name: '筛选组合02' },
        { name: '筛选组合03' },
        { name: '筛选组合04' },
        { name: '筛选组合05' },
        { name: '筛选组合06' },
        { name: '筛选组合07' },
      ];
    },
    // 处理点击按钮外区域的方法
    handleClickOutside(event) {
      // 获取弹窗元素
      const trigger1 = this.$el.querySelector('.left-icon');
      const trigger2 = this.$el.querySelector('.inner-box');
      const trigger3 = this.$el.querySelector('.right-icon');
      const modal = this.$el.querySelector('.select-content-box');
      if (
        this.isSelectShow &&
        !trigger1.contains(event.target) &&
        !trigger2.contains(event.target) &&
        !trigger3.contains(event.target) &&
        (!modal || !modal.contains(event.target)) ) {
        this.isSelectShow = false;
      }
    },
    currentValueChange: debounce(function() {
      this.onSearch();
    }, 1000),
    // 查询
    onSearch() {
      let selectFieldList = [];
      if (this.isSelectAll) {
        selectFieldList = this.searchFieldList.map(item => item.field);
      } else {
        this.searchFieldList.forEach(item => {
          if (item.isSelect) selectFieldList.push(item.field);
        });
      }
      this.$emit('getParams', this.currentValue, selectFieldList);
    },
    // 打开搜索框
    openSelect() {
      this.isSelectShow = !this.isSelectShow;
    },
    // 选择 搜索全部
    onSelectAll() {
      if (!this.isSelectAll) {
        this.isSelectAll = true;
        this.searchFieldList.forEach(item => {
          item.isSelect = false
        })
      }
    },
    // 打开 搜索特定字段
    openSelectOther() {
      this.isSelectOther = !this.isSelectOther;
    },
    // 选择 搜索特定字段
    onSelectOther(item) {
      item.isSelect = !item.isSelect;
      if (item.isSelect) this.isSelectAll = false;
    },
    // 选择 搜索特定字段 改变
    selectOtherChange(e) {
      const { checked } = e.target;
      if (checked) {
        this.isSelectAll = false;
      }
    },
    // 打开 高级搜索
    openAdSearch() {
      this.drawerVisible = true;
    },
    // 关闭 高级搜索
    onDrawerClose() {
      this.drawerVisible = false;
    },
    // 确定搜索 高级搜索
    onAdSearch() {
      this.$emit('adSearch');
      this.onDrawerClose();
    },
    // 重置 高级搜索
    onAdClear() {
      this.$emit('adClear');
    },
    // 保存筛选条件
    onSaveFilterData() {
      const state = this.tagList.some(item => item.name === this.saveFilterValue);
      if (state) {
        this.$error({ content: '已存在同名条件！', centered: true });
      } else {
        const curTag = {
          name: this.saveFilterValue
        }
        this.tagList.push(curTag);
        this.saveFilterValue = '';
        this.popoverVisible = false;
      }
    },  
    onTagClick(item) {
      this.$emit('tagClick', item);
    },
    onTagClose(item) {
      console.log(item, 'onTagClose');
    },
  }
}
</script>

<style lang="less" scoped>
/* 定义模态框淡入淡出的过渡效果 */
.modal-fade-enter-active, .modal-fade-leave-active {
  transition: opacity 0.5s;
}
/* 进入过渡的起始状态 */
.modal-fade-enter, .modal-fade-leave-to {
  opacity: 0;
}

.composite-search-box {
  position: relative;
  display: flex;
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1.02px solid #d9d9d9;
  border-radius: 4px;
  outline: none;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  user-select: none;
  
  margin: 0 8px 8px 0;
  .left-icon {
    flex: 0 1 auto;
    padding: 0 8px;
    font-size: 14px;
    cursor: pointer;
    border-right: 1px solid #d1d1d1;
  }
  .inner-box {
    flex: 1 1 auto;
    /* border-left: 1px solid #d1d1d1; */
    /* border-right: 1px solid #d1d1d1; */
    height: 20px;
    line-height: 20px;
    position: relative;
    margin: 6px 0;
    padding-left: 5px;
    .input-box {
      position: absolute;
      top: 0;
      left: 20px;
      width: calc(100% - 25px);
      height: 20px;
      line-height: 20px;
      border: none;
    }
    input:focus {
      outline: none;
    }
  }
  .right-icon {
    flex: 0 1 auto;
    padding: 0 8px;
    font-size: 14px;
    color: #1890FF;
    cursor: pointer;
    border-left: 1px solid #d1d1d1;
  }
  .select-content-box {
    position: absolute;
    top: 37px;
    left: 0;
    z-index: 999;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #fff;
    border-radius: 6px;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 10px;
  }
  .isSelect {
    background: #f1f8ff;
  }
  .select-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 20px;
    padding: 5px;
    cursor: pointer;
    &:hover {
      background: #ebf5ff;
    }
  }
  .field-box {
    padding: 5px 0 0;
    cursor: pointer;
  }
  .field-item {
    line-height: 32px;
    padding: 0 5px;
    &:hover {
      background: #ebf5ff;
    }
  }
}

.ad-header-box {
  background-color: rgba(245, 245, 245, 1);
  padding: 10px 30px;
}
.ad-content-box {
  padding: 10px 24px 0;
}
.ad-footer-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 20px;
  background: #fff;
  text-align: left;
  z-index: 1;

  display: flex;
  justify-content: space-between;
}

.popover-footer {
  display: flex;
}
</style>

<style lang="less">
</style>